<template>
  <div class="detail-container">
    <!-- 头图 -->
    <TopTheme height="200px" bg="toppic03.png" title="橙券新闻动态" des1="新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！"></TopTheme>

    <!-- 新闻内容 -->
    <div class="news-detail w1200">
      <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页<el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/news' }">新闻动态<el-breadcrumb-item>
         <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
       
       </el-breadcrumb>
        <div class="news-detail-content">
            <h2>{{ title }}</h2>
            <div class="data">{{ updatedAt }}</div>
            <main v-html="content"></main>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsDetail',
  data() {
    return {
        title: '',
        content: '',
        updateAt: ''
    }
  },
  methods: {
    async getNewsDetail() {
        const {id} = this.$route.params
        // 获取新闻详情
        const { data } = await this.$req(`/news/${id}`,'get')
        const {title, content, updateAt} = data
        this.title = title
        this.content = content
        this.updateAt = updateAt
    }
  },
  created() {
    this.getNewsDetail()
  }
}
</script>

<style lang="scss" scoped>
.news-detail {
    margin-bottom: 60px;
    padding-top: 50px;
    .news-detail-content {
        min-height: 200px;
        & > h2 {
            margin-top: 60px;
            text-align: center;
            font-size: 30px;

        }
        & > .data {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
            color: #110808;
        }
        & > main {
            margin-top: 30px;
            font-size: 16px;
        }
    }
}
</style>
